import React, { Component } from 'react'
import PropTypes from 'prop-types'

class CourseItem extends Component {
    static propTypes={
        name:PropTypes.string,
        stu:PropTypes.number.isRequired,
        task:PropTypes.number,
    }
    //!属性没传时，才使用默认值 
    static defaultProps={
        name:'同步课'
    }
    
    render() {
        const {task,name,stu}=this.props; //预先解构出来

        // 传过来的属性data是一个包含四个属性的数组
        // console.log(this.props);
        // const {data:{task,name,stu}}=this.props;
        
        return (
                                                        // 默认单位为px
            <div style={{width:200,border:'1px solid red',padding:20,marginTop:20}}>
                <h2>{name.length>8?name.slice(0,8)+"...":name}</h2>
                <p>任务数：{task}</p>
                {
                    task>2?<li>li</li>:<h1>h1</h1>
                }
                <p>人数：{stu+1}</p>
                <button>申请</button>
            </div>
        )
    }
}

// CourseItem.propTypes={
//     name:PropTypes.string,
//     stu:PropTypes.number.isRequired,
//     task:PropTypes.number,
// }

export default CourseItem
